import React, { PureComponent } from 'react';
// 引入样式
import './application.scss';
import { Input, Button, message } from 'antd';
// 引入动作
import store from '../store/index';
// 引入路由
import { NavLink } from 'react-router-dom';
export default class Application extends PureComponent {
  constructor() {
    super()
    this.state = {
      // input输入框内容
      input: '',
      // 应用列表
      applist: ['解析图片地址上传', '手机高清壁纸图片', '聊天机器人qq', '舔狗日记', '历史上的今天发生了什么时间', '手机号码归属地', '天气预报', 'IP地址查询', '网易云音乐热评', '在线生成二维码', '短网址生成转换', '在线画板画画白板', 'LED灯手持弹幕', '计算器算数', '翻译', '下载PNG图片'],
      // 添加应用
      addapp: false,
      // 添加应用的应用名称
      inputText: ''
    }
    // state的写法
    this.unSubscribe = store.subscribe(() => {
      // 强制更新
      this.forceUpdate()
    })
  }
  // 清除订阅者
  componentWillUnmount () {
    this.unSubscribe()
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  // 网页加载判断没有登录返回主页
  componentDidMount () {
    let { userId } = store.getState().reducer;
    if (!userId) {
      // 用户直接通过网址进入就跳转至主页
      this.props.history.replace('/');
      return;
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 退回主页
  endeHome = () => {
    this.props.history.replace('/');
  }
  // 搜索框结果
  applicationInput = () => {
    let { input, applist } = this.state;
    if (!input) {
      message.info({ content: '输入一个应用名', className: 'bulletChatMessage' });
      return;
    }
    // 显示添加应用框
    this.setState({
      addapp: true,
      // 没有应用的蚊子
      inputText: input
    })
    // 进入函数先隐藏
    for (let index = 0; index < applist.length; index++) {
      let truelist = document.getElementsByClassName('king_body_kuai')[index];
      truelist.style.display = 'none';
    }
    for (let i = 0; i < input.length; i++) {
      let inputIndex = input[i];
      // 判断显示那个
      for (let index = 0; index < applist.length; index++) {
        const element = applist[index];
        // 找到包含的对象
        if (element.indexOf(inputIndex) !== -1) {
          // 显示对象
          let truelist = document.getElementsByClassName('king_body_kuai')[index];
          truelist.style.display = 'block';
          // 有应用就隐藏添加应用框
          this.setState({
            addapp: false
          })
        }
      }
    }
  }
  render () {
    let { addapp, input, inputText } = this.state;
    return (
      <div className='application'>
        {/* 输入框 */}
        <div className='application_top'>
          <Input placeholder="搜索应用名称" className='applicationInput' value={input} name='input' onChange={this.handleInput} autoComplete="off" onPressEnter={this.applicationInput} />
          <Button type='link' onClick={this.endeHome}>取消</Button>
        </div>
        {/* 应用显示内容 */}
        <div className='application_body'>
          {/* 添加应用 */}
          <div className='application_body_add' style={{ display: addapp ? 'block' : 'none' }}>
            <img src={require('./image/wen.png')} alt="wen" />
            <p>没有找到关于<span style={{ color: '#000', margin: '0 3px' }}>{inputText}</span>的应用？</p>
            <p>您可以联系管理员添加您想要的功能</p>
          </div>
          {/* 解析图片地址 */}
          <NavLink to='/life/Upload'>
            <div className='king_body_kuai' style={{ background: '#888069' }}>
              <img className='king_body_icon' src={require('../life/image/jiexi.png')} alt="解析" width='40vw' />
              <p>Life Upload</p>
              <p>解析图片地址</p>
            </div>
          </NavLink>

          {/* 手机高清壁纸 */}
          <NavLink to='/life/Picture'>
            <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
              <img className='king_body_icon' src={require('../life/image/bizhi.png')} alt="壁纸" width='25vw' />
              <p>Life Picture</p>
              <p>手机高清壁纸</p>
            </div>
          </NavLink>

          {/* 聊天机器人 */}
          <NavLink to='/life/chat'>
            <div className='king_body_kuai' style={{ background: '#998899' }}>
              <img className='king_body_icon' src={require('../life/image/liaotian.png')} alt="聊天机器人" width='40vw' />
              <p>Life Chat</p>
              <p>聊天机器人</p>
            </div>
          </NavLink>

          {/* 舔狗日记 */}
          <NavLink to='/life/flatterer'>
            <div className='king_body_kuai' style={{ background: '#7f8ea0' }}>
              <img className='king_body_icon' src={require('../life/image/riji.png')} alt="日记" width='35vw' />
              <p>Life Flatterer</p>
              <p>舔狗日记</p>
            </div>
          </NavLink>

          {/* 历史上的今天 */}
          <NavLink to='/life/history'>
            <div className='king_body_kuai'>
              <img className='king_body_icon' src={require('../life/image/lishi.png')} alt="历史" width='40vw' />
              <p>Life History</p>
              <p>历史上的今天</p>
            </div>
          </NavLink>

          {/* 手机号码归属地 */}
          <NavLink to='/life/phone'>
            <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
              <img className='king_body_icon' src={require('../life/image/haoma.png')} alt="号码" width='30vw' />
              <p>Life Phone</p>
              <p>手机号码归属地</p>
            </div>
          </NavLink>

          {/* 天气预报 */}
          <NavLink to='/life/weather'>
            <div className='king_body_kuai' style={{ background: '#89d04f' }}>
              <img className='king_body_icon' src={require('../life/image/tianqi.png')} alt="天气" width='40vw' />
              <p>Life Weather</p>
              <p>天气预报</p>
            </div>
          </NavLink>

          {/* ip地址查询 */}
          <NavLink to='/life/addressip'>
            <div className='king_body_kuai' style={{ background: '#998899' }}>
              <img className='king_body_icon' src={require('../life/image/ip.png')} alt="ip" width='40vw' />
              <p>Life Addressip</p>
              <p>IP地址查询</p>
            </div>
          </NavLink>

          {/* 网易云音乐热评 */}
          <NavLink to='/life/HotComments'>
            <div className='king_body_kuai' style={{ background: '#7f8ea0' }}>
              <img className='king_body_icon' src={require('../life/image/wangyiyun.png')} alt="热评" width='40vw' />
              <p>Life HotComments</p>
              <p>网易云音乐热评</p>
            </div>
          </NavLink>

          {/* 内容转二维码 */}
          <NavLink to='/life/QRCode'>
            <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
              <img className='king_body_icon' src={require('../life/image/erwenma.png')} alt="二维码" width='40vw' />
              <p>Life QRCode</p>
              <p>在线生成二维码</p>
            </div>
          </NavLink>

          {/* 短网址生成 */}
          <NavLink to='/life/short'>
            <div className='king_body_kuai' style={{ background: '#89d04f' }}>
              <img className='king_body_icon' src={require('../life/image/duanwangzhi.png')} alt="短网址" width='40vw' />
              <p>Life Short</p>
              <p>短网址生成</p>
            </div>
          </NavLink>

          {/* 在线画板 */}
          <NavLink to='/life/painting'>
            <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
              <img className='king_body_icon' src={require('../life/image/huaban.png')} alt="画板" width='40vw' />
              <p>Life Painting</p>
              <p>在线画板</p>
            </div>
          </NavLink>

          {/* 手持弹幕 */}
          <NavLink to='/life/bulletChat'>
            <div className='king_body_kuai' style={{ background: '#888069' }}>
              <img className='king_body_icon' src={require('../life/image/danmu.png')} alt="弹幕" width='40vw' />
              <p>Life BulletChat</p>
              <p>手持弹幕</p>
            </div>
          </NavLink>

          {/* 计算器 */}
          <NavLink to='/life/calculator'>
            <div className='king_body_kuai' style={{ background: '#89d04f' }}>
              <img className='king_body_icon' src={require('../life/image/jisuanqi.png')} alt="计算器" width='35vw' />
              <p>Life Calculator</p>
              <p>计算器</p>
            </div>
          </NavLink>

          {/* 翻译 */}
          <NavLink to='/life/translate'>
            <div className='king_body_kuai' style={{ background: '#1488f5' }}>
              <img className='king_body_icon' src={require('../life/image/fanyi.png')} alt="翻译" width='40vw' />
              <p>Life Translate</p>
              <p>翻译</p>
            </div>
          </NavLink>

          {/* 下载PNG图片 */}
          <NavLink to='/life/spider'>
            <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
              <img className='king_body_icon' src={require('../life/image/konglong.png')} alt="恐龙" width='40vw' />
              <p>Life Spider</p>
              <p>下载PNG图片</p>
            </div>
          </NavLink>
        </div>
      </div>
    )
  }
}